import NProgress from 'nprogress' // progress bar
// NProgress虚拟进度条
import 'nprogress/nprogress.css'
import router from './router'
import store from '@/store'
import getPageTitle from './utils/get-page-title'

// 白名单:项目里面 不需要token,不需要登录就可以看见的页面,比如注册页,登录页,404页面
const whiteList = ['/login', '/404']
// 判断一个元素在不在数组里面
// arr.includes(xxx)       arr.indexOf(xxx) === -1

// 前置路由守卫,2个函数,在进入页面的时候自动执行
router.beforeEach(async(to, from, next) => {
  document.title = getPageTitle(to.meta.title)
  NProgress.start()
  const token = store.state.user.token
  if (token) {
    if (whiteList.includes(to.path)) {
      // 如果已经登录成功,还要去登录页,用户体验感会不好,应该直接给他跳转到首页
      next('/')
      NProgress.done()
    } else {
      // 这个地方就是有token,并且访问的是一些需要权限的页面,代码执行的方法
      // this.$store
      // 如果获取到了userInfo的数据,就不要再发送请求了 ---- 怎么样知道请求成功了 ----
      // 请求成功做了什么事情?将userInfo的数据放到了vuex里面去了,请求成功后,对象的一个属性,一般用id
      if (!store.state.user.userInfo.id) {
        await store.dispatch('user/getUserInfoAction')
      }
      // 下面代码是 路由放行,必须等上一步请求成功或者失败,请求完成了,才能进行下一步
      next()
    }
  } else {
    // 如果没有token,用户通过地址栏强行跳转时
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }

//   next()
})
// 后置路由守卫,进入页面以后执行的钩子函数 afterEach
// afterEach并不一定都会执行,如果在进入的beforeEach钩子函数里面
// 通过next('参数')跳转到其他页面,这个afterEach就不会执行
router.afterEach(() => {
  NProgress.done()
})
